<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul>
      <!-- <p>555</p> -->
      <li class="myli"><span>111</span></li>
      <li class="myli"><span>111</span></li>
      <li class="myli"><span>111</span></li>
      <li class="myli"><span>111</span></li>
    </ul>
    <button>添加</button>
    <script>
      // 事件委托：把事件委托给父级元素；
      // 事件委托 ：1.性能更好；(元素比较多)  2.动态的修改元素事件不会受到影响；

      // 动态修改元素事件不会受到影响；
      // 事件委托； // 事件委托绑定
      var ulEle = document.querySelector("ul");
      ulEle.onclick = function (e) {
        var e = e || window.event;
        var target = e.target || e.srcElement;
        if (target.nodeName == "SPAN") {
          //   console.log(e.target);
          e.target.parentNode.style.background = "pink";
          console.log("点击了li");
          //如果点击的目标元素元素类型是LI 执行函数体，  (target得不到文本节点 所以如果要点击文本改变 就套一个span)
        }
      };

      // 普通绑定
      // var lis = document.querySelectorAll("li");
      // var ulEle =  document.querySelector("ul");
      // lis.forEach(function(li){
      //     li.onclick = function(){
      //         console.log("点击了li");
      //     }
      // })

      //添加LI
      var btn = document.querySelector("button");
      btn.onclick = function () {
        var liEle = document.createElement("li");
        liEle.innerHTML = "<span>添加的</span>";
        ulEle.appendChild(liEle);
      };
    </script>
  </body>
</html>
